<template>
  <div id="app">
    <!-- 面包屑 -->
    <div id="breadcrumb_box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item><span id="current">首页图表</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card>
      <div class="echart-box" id="myChart3">
      </div>
    </el-card>
    <el-row>
      <el-col :span="8">
        <el-card>
          <div class="echart-box" id="myChart1">
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="echart-box" id="myChart2">
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="echart-box" id="myChart4">
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart1: {
        // 定义图表，各种参数
        msg: "柱状图",
        datay: [],
      },
      chart2: {
        // 定义图表，各种参数
        msg: "扇形图",
        datas: [],
      },
      chart3: {
        // 定义图表，各种参数
        msg: "折线图",
        dataz1: [],
        dataz2: [],
      },
      chart4: {
        // 定义图表，各种参数
        msg: "圆角环形图",
        datah: [],
      },
    };
  },

  created() {
    this.echart1()
    this.echart2()
    this.echart3()
    this.echart4()
    const that = this
    setTimeout(function () {
      that.drawLine1()
      that.drawLine2()
      that.drawLine3()
      that.drawLine4()
    }, 500);
  },
  methods: {

    async echart1() {
      const { data: res } = await this.$http.get('/gim/api/admin/manageGoods/selectGoodsPrice')
      // console.log(res)
      if (res.code === 1) {
        this.chart1.datay = res.response; //清空数组
        // console.log(this.chart1.datay);
      }
    },

    async echart2() {
      const { data: res } = await this.$http.get('/gim/api/admin/manageWarehouse/selectWarehouse/inventoryNum')
      // console.log(res)
      if (res.code === 1) {
        this.chart2.datas = res.response; //清空数组
        // console.log(this.chart2.datas);
      }
    },

    async echart3() {
      const { data: res } = await this.$http.get('/gim/api/admin/manageInventoryRecord/selectRecordDate')
      // console.log(res)
      if (res.code === 1) {
        this.chart3.dataz1 = res.response[0]; //清空数组
        this.chart3.dataz2 = res.response[1];
        // console.log(this.chart3);
      }
    },

    async echart4() {
      const { data: res } = await this.$http.get('/gim/api/admin/manageUser/selectUser/permissions')
      // console.log(res)
      if (res.code === 1) {
        this.chart4.datah = res.response; //清空数组
        // console.log(this.chart3);
      }
    },

    drawLine1() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      //2、构造图表数据
      let options = {
        title: {
          text: "货品价格范围情况分析",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          type: 'category',
          data: [
            "0~9",
            "10~19",
            "20~29",
            "30~39",
            "40~49",
            "50~59",
            "60~69",
            "70~79",
            "80~89",
            "90~99",
            "100以上",
          ],
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: "货品价格范围",
            data: this.chart1.datay,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },

    drawLine2() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      //2、构造图表数据
      let options = {
        title: {
          text: "仓库库存分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          // data: [],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            // center: ["50%", "60%"],
            data: this.chart2.datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },

    drawLine3() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      //2、构造图表数据
      let options = {
        title: {
          text: "上周出入库情况分析(6.13-6.19)",
          left: "left",
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: true },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 次'
          }
        },
        series: [
          {
            name: '出库',
            type: 'line',
            data: this.chart3.dataz1,
            // data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '入库',
            type: 'line',
            data: this.chart3.dataz2,
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          },
        ],
      };
      // 3、绘制图表
      myChart3.setOption(options);
    },

    drawLine4() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
      //2、构造图表数据
      let options = {
        title: {
          text: "管理权限分布",
          left: "center",
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '7%',
          left: 'center'
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chart4.datah,
          },

        ],
      };
      // 3、绘制图表
      myChart4.setOption(options);
    },
  },
};
</script>


<style scoped src="../../assets/css/admin/chart.css">
</style>